<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX 属性绑定</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 模拟用户数据
			let user = {
				username: "damu",
				realname: "大牧",
				img: "./images/1.webp"
			}
			
			// JSX结构化语法
			// 绑定属性：属性值使用插值表达式，不添加引号
			let div = 	<div>
							<p>账号: {user.username}</p>
							<p>姓名: {user.realname}</p>
							<p>头像: <img src={user.img} /></p>
						</div>
			
			
			// 渲染展示数据
			ReactDOM.render(div, document.querySelector("#app"))
		</script>
	</body>
</html>